<template>
    <view class="pageIndex">
        <view class="banner">
            <swiper class="swiper" circular>
                <swiper-item>
                    <image src="@/static/temp/banner3.png" mode="widthFix"></image>
                </swiper-item>
            </swiper>
            <view class="shopitem">
                <view class="logoNameFanDistanceCollect align-center">
                    <view class="logo">
                        <image src="" mode="aspectFill"></image>
                    </view>
                    <view class="nameDisf">
                        <view class="nameisnew">
                            bolon眼镜(达芬奇店)
                            <text class="isnew">新店开业</text>
                        </view>
                        <view class="fansd">
                            <text>1600 粉丝</text>
                            <text>距离 19 km</text>
                        </view>
                    </view>
                </view>    
            </view>    
        </view>
        <view class="idcaed">
            <!-- iscollect -->
            <view class="collect nocollect  align-center justify-center">
                <uni-icons type="star-filled" size="18" color="#fff"></uni-icons>
                收藏    
            </view>
            <view class="shopname">bolon眼镜(达芬奇店)</view>
            <view class="ratingbox">
                <view class="norating">
                    评论数量不足，暂无评分~
                </view>
                <!-- <view class="rating align-center">
                    <image src="@/static/icon/collect.png" mode="widthFix"></image>
                    4.8分
                </view> -->
            </view>
            <view class="workingtime">
                营业中：08:00-23:00
            </view>
            <view class="line"></view>
            <view class="address justify-between align-center">
                <view class="addre">
                    <view class="add">北京卢必兴杰</view>
                    <view class="juli">距您800米，步行20分钟</view>
                </view>
                <view class="btns align-center">
                    <view class="yuanbi" style="margin-right: 40rpx;">
                        <view class="yuan">
                            <uni-icons type="paperplane-filled" size="18" color="#50545A"></uni-icons>
                        </view>
                        <view class="bi">导航</view>
                    </view>
                    <view class="yuanbi">
                        <!--  -->
                        <view class="yuan">
                            <uni-icons type="phone-filled" size="18" color="#50545A"></uni-icons>
                        </view>
                        <view class="bi">电话</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="searchbox align-center justify-between" :class="topstyle == 2?'flexsearchbox':''">
            <uni-icons type="left" size="24" v-if="topstyle == 1" color="#fff"></uni-icons>
            <uni-icons type="left" size="24" v-else></uni-icons>
            <view class="search align-center">
                <uni-icons type="search" size="21" color="#ABB0C1"></uni-icons>
                
                <input type="text" placeholder="请输入商家名称">
            </view>
        </view>
        <view class="goodstitle">
            商品列表
        </view>
         <view class="goodslist">
            <view class="goodsitem flex-row">
                <view class="thumb">
                    
                </view>
                <view class="other">
                    <view class="goods_name">新款墨镜高级感眼镜</view>
                    <view class="tags">
                        <text class="tag">免预约</text>
                        <text class="tag">随时退</text>
                    </view>
                    <view class="buy_num">已售587件</view>
                    <view class="price">
                        <text class="red_price y">￥</text>
                        <text class="red_price p">88</text>
                        <text class="hui_price">180</text>
                    </view>
                </view>
                <view class="btn">抢购</view>
            </view> 
            <view class="goodsitem flex-row">
                <view class="thumb">
                    
                </view>
                <view class="other">
                    <view class="goods_name">新款墨镜高级感眼镜</view>
                    <view class="tags">
                        <text class="tag">免预约</text>
                        <text class="tag">随时退</text>
                    </view>
                    <view class="buy_num">已售587件</view>
                    <view class="price">
                        <text class="red_price y">￥</text>
                        <text class="red_price p">88</text>
                        <text class="hui_price">180</text>
                    </view>
                </view>
                <view class="btn">抢购</view>
            </view> 
            <view class="goodsitem flex-row">
                <view class="thumb">
                    
                </view>
                <view class="other">
                    <view class="goods_name">新款墨镜高级感眼镜</view>
                    <view class="tags">
                        <text class="tag">免预约</text>
                        <text class="tag">随时退</text>
                    </view>
                    <view class="buy_num">已售587件</view>
                    <view class="price">
                        <text class="red_price y">￥</text>
                        <text class="red_price p">88</text>
                        <text class="hui_price">180</text>
                    </view>
                </view>
                <view class="btn">抢购</view>
            </view> 
         </view>       
        
        <xui-xtotop ref="xtotop_ref" bgColor="#fff" borColor="#ddd" color="#222"></xui-xtotop>
        <view style="height: 100rpx;"></view>
    </view>

</template>

<script>
    import Shops from '../common/shops/index.vue'
    export default{
        components:{
            Shops
        },  
        data() {
          return {
            constants: {},
            topstyle:1
          };
        },
        onPageScroll(e) {
           if(e.scrollTop>=200){
               this.topstyle = 2
           }else{
               this.topstyle = 1
           }
        	this.$refs.xtotop_ref.scroll(e);
        },
        methods: {}
    }
</script>

<style lang="scss">
@import '../common/common.scss';
.pageIndex{
    
    .banner{
        width: 750rpx;
        height: 373rpx;
        position: relative;
        .swiper{
            position: relative;
            z-index: 9;
            width: 750rpx;
            height: 373rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .shopitem{
            width: 750rpx;
            height: 373rpx;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
            background-color: rgba(#000,0.4);
            .logoNameFanDistanceCollect{
            
                margin-top: calc(var(--status-bar-height) + 203rpx);
                margin-left: 32rpx;
                .logo{
                    width: 104rpx;
                    height: 104rpx;
                    border-radius: 10rpx;
                    overflow: hidden;
                    background-color: #ccc;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                .nameDisf{
                    margin-left: 20rpx;
                    .nameisnew{
                        font-size: 27rpx;
                        color: #FFFFFF;
                        .isnew{
                            margin-left: 30rpx;
                           padding: 5rpx 12rpx;
                           background-color: #C5B3A8;
                           border-radius: 6rpx;
                           font-size: 21rpx;
                           color: #FFFFFF;
                        }
                    }
                    .fansd{
                        font-size: 25rpx;
                        color: #fff;
                    }
                }
                
            }
        }
       
    }
    .idcaed{
        width: 750rpx;
        min-height: 250rpx;
        background: #FFFFFF;
        border-radius: 17rpx 17rpx 0rpx 0rpx;
        position: relative;
        z-index: 15;
        margin-top: -30rpx;
        padding: 0 28rpx;
        .collect{
            width: 164rpx;
            height: 73rpx;
            border-radius: 21rpx;
            position: absolute;
            top: 33.33rpx;
            right: 26.4rpx;
            color: #fff;
            uni-icons{
                margin-right: 5rpx;
            }
        }
        .nocollect{
            background: #B39272;
        }
        .iscollect{
            background: #ccc;
        }
        .shopname{
            font-weight: 800;
            font-size: 38rpx;
            line-height: 38rpx;
            display: inline-block;
            margin-top: 50rpx;
        }
        .ratingbox{
            margin-top: 10rpx;
            .rating{
                font-size: 26rpx;
                color: var(--price-color);
               
                image{
                    width: 26rpx;
                    height: 26rpx;
                }
                
            }
            .norating{
                color: var(--str-mid-color);
                font-size: 24rpx;
            }
        }
        .workingtime{
            margin-top: 10rpx;
            font-size: 24rpx;
            font-weight: bold;
        }
        .line{
            width: 100%;
            height: 2rpx;
            background-color: #f5f5f5;
            margin: 10px 0;
        }
        .address{
            padding-bottom: 10rpx;
            .addre{
                .add{
                    font-size: 23rpx;
                    line-height: 23rpx;
                    font-weight: 800;
                }
                .juli{
                    color: var(--str-mid-color);
                    font-size: 22rpx;
                }
            }
            .btns{
                font-size: 24rpx;
                color: var(--str-mid-color);
                .yuan{
                    width: 48.96rpx;
                    height: 48.96rpx;
                    line-height: 48.96rpx;
                    background-color: rgba(#9096A2, 0.2);
                    border-radius: 50%;
                    text-align: center;
                }
            }
        }
    }
    .goodstitle{
        font-size: 31rpx;
        font-weight: 800;
        text-indent: 21rpx;
        height: 70rpx;
        line-height: 70rpx;
        background-color: #fff;
        margin-top: 20rpx;
    }
    .goodslist{
        .goodsitem{
         
           width: 715rpx;
           height: 306rpx;
           background: #FFFFFF;
           border-radius: 21rpx; 
           margin: 0 auto;
           margin-top: 10rpx;
           padding: 20rpx;
           position: relative;
           .thumb{
               border-radius: 10rpx;
               width: 261.46rpx;
               height: 261.46rpx;
               background-color: #ccc;
           }
           .other{
               margin-left: 25rpx;
               .goods_name{
                   font-weight: 800;
                   font-size: 28rpx;
                   margin-top: 20rpx;
               }
               .tags{
                   margin-top: 5rpx;
                   .tag{
                       display: inline;
                       margin-right: 5rpx;
                       padding: 0 5rpx;
                       border: 1px solid #ccc;
                       color: var(--str-mid-color);
                       font-size: 20rpx;
                       line-height: 26rpx;
                       border-radius: 5rpx;
                   }
               }
               .buy_num{
                   width: 140rpx;
                   text-align: center;
                   line-height:36rpx ;
                   height: 36rpx;
                   background: #FBF1F1;
                   border-radius: 10rpx;
                   font-size: 21rpx; 
                   margin-top: 10rpx;
               }
               .price{
                   margin-top: 50rpx;
                   .y{
                       font-size: 24rpx;
                   }
                   .p{
                       font-size: 37.5rpx;
                   }
                   .hui_price{
                       text-decoration-line: line-through;
                       font-size: 25rpx;
                       color: #ACACAC;
                       margin-left: 10rpx;
                   }
                   .red_price{
                       color: var(--price-color);
                   }
               }
           }
           .btn{
               width: 141rpx;
               height: 48rpx;
               line-height: 48rpx;
               text-align: center;
               background: #C5B3A8;
               border-radius: 24rpx;
               font-size: 24rpx;
               color: #FFFFFF;
               position: absolute;
               bottom: 30rpx;
               right: 20rpx;
           }
        }
    }
    .searchbox{
        position: fixed;
        top: calc(var(--status-bar-height) + 94rpx);
        left: 0;
        height: 100rpx;
        width: 750rpx;
        z-index: 99;
        .search{
            width: 664rpx;
            height: 67rpx;
            background-color: #fff;
            border-radius: 33rpx;
            padding: 0 18rpx;
            margin-right: 20rpx;
            input{
                font-size: 22.78rpx;
            }
        }
    }
    .flexsearchbox{
       // 
       .search{
           background: rgba(#BEBEBE,0.86);
       }
    }
    .bibala{
        width: 750rpx;
        height: 343rpx;
        background: #FFFFFF;
        border-radius: 17rpx 17rpx 0rpx 0rpx;
        margin-top: -30rpx;
        position: relative;
        z-index: 10;
        padding-top: 30rpx;
        .banner4{
            width: 676rpx;
            height: 198rpx;
            margin: 0 auto;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .newb{
            margin-top: 40rpx;
            font-weight: 800;
            font-size: 33rpx;
            text-align: center;
        }
    }
}
</style>